<template>
  <div class="dy-main my-fundation">
    <div class="dy-header">
      <x-header :right-options="{showMore: true}" @on-click-more="showMenus = true">我的基金</x-header>
    </div>
    <div class="dy-body">
      <div class="productDetailBox">
        <!-- <h3>{{financialData.name}}</h3> -->
        <div><p class="benefit caption">99,999,333.00</p><p class="benefit">总盈亏（元）</p></div>
        <div class="bothChock">
          <div><p class="fot30">2000000000.00元</p><p>昨日盈亏</p></div>
          <i class="line"></i>
          <div><p class="fot30">666.00元</p><p>总市值</p></div>
        </div>
      </div>
      <div class="title">我的定投</div>
      <div class="show-box">
        <h3>国泰基金财富号</h3>
        <ul>
          <li>
            <h3>国泰民安割韭菜</h3>
            <div class="list">
              <div><p>5.202</p><p>金额</p></div>
              <div><p>+5.20</p><p>昨日盈亏</p></div>
              <div><p>-7.8099</p><p>总盈亏(元)</p></div>
              <i class="rightArr"></i>
            </div>
          </li>
          <li>
            <h3>国泰民安割韭菜</h3>
            <div class="list">
              <div><p>5.202</p><p>金额</p></div>
              <div><p>+5.20</p><p>昨日盈亏</p></div>
              <div><p>-7.8099</p><p>总盈亏(元)</p></div>
              <i class="rightArr"></i>
            </div>
          </li>
        </ul>
      </div>
      <div class="show-box">
        <h3>国泰基金财富号积极i级</h3>
        <ul>
          <li>
            <h3>国泰民安割韭菜</h3>
            <div class="list">
              <div><p>5.202</p><p>金额</p></div>
              <div><p>+5.20</p><p>昨日盈亏</p></div>
              <div><p>-7.8099</p><p>总盈亏(元)</p></div>
              <i class="rightArr"></i>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      financialData: {
        name: '', // 理财产品名
        rate: '', // 年化收益率
        profit: '', // 年化收益额
        term: '', // 投资期限
        availableCredit: '', // 剩余额度
        totalAmountOfPurchase: '', // 可购总额度
        remainingTime: '', // 还剩xx天购买
        openSaleDate: '', // 开售日
        cutOffDate: '', // 截止日
        interestDate: '', // 起息日
        dueDate: '', // 到期日
        list: {
          subTime: '', // 认购期
          productName: '', // 产品名称
          productType: '', // 产品类型
          currency: '', // 计价币种
          deliveryTime: '', // 产品交收日期
          expireTime: '', // 产品到期日期
          minBuyMoney: '', // 最低购买金额
          increaseMoney: '', // 递增金额
          saveBook: '', // 是否保本
          RiskGrade: '' // 风险等级
        }},
      buttonTxt: '购买' // 判断获得： 1.购买；2.去开户
    }
  },
  methods: {
    getFinancialData () {
      let _this = this
      window.WebViewJavascriptBridge.callHandler('nativeRequest',
        JSON.stringify({
          'requstSource': 'internetRequest',
          'url': 'http://whichat.icitic.net/mstep/mstep.do?act=business',
          'params': {'method_Name': 'showProDetail', 'user_Data': {'productId': '3015'}}
        }),
        function (response) {
          response = JSON.parse(response)
          if (response.status === 0 || response.status === '0') {
            _this.financialData = response.data.data[0]
          } else {
            console.log('fail')
          }
        })
    },
    getMore () {
    },
    dataLists () {
    },
    gotoNext () {
      this.$router.push({name: 'FinancialShift'})
    }
  },
  created () {
  // this.getFinancialData()
  }
}
</script>
<style lang="less">
.my-fundation{
  .dy-header{
  }
  .dy-body{
    .productDetailBox {
      width: 100%;
      padding:.2rem 0;
      background-color: #3d477b;
      color: #fff;
      .bothChock {
        position: relative;
        text-align: center;
        overflow: hidden;
        &>div{
          float: left;
          width: 50%;
        }
      }
      .fot30{
        font-size: .35rem;
      }
      .line{
        position:absolute;
        top: .2rem;
        left: 50%;
        margin-left: -.5px;
        width: 1px;
        height: .4rem;
        background: #fff;
      }
      .benefit{
        text-align: center;
      }
      .caption{
        font-size: .5rem;
      }
    }
  }
  .title{
    width: 100%;
    line-height: .88rem;
    padding-left: .4rem;
    background: #fff;
  }
  .show-box{
    width: 100%;
    margin-top: .2rem;
    background: #fff;
    &>h3{
      width:100%;
      font-size: .4rem;
      padding-left: .28rem;
      line-height: .8rem;
    }
    li{
      border-top: 1px solid #eee;
      padding-bottom: .4rem;
      &>h3{
        width: 100%;
        padding: .2rem .28rem;
      }
      .list{
        position: relative;
        display: flex;
        padding-left: .28rem;
        &>div{
          flex-grow: 1;
        }
        .rightArr{
          position: absolute;
          top: 50%;
          right: .4rem;
          width: .22rem;
          height: .22rem;
          margin-top: -.11rem;
          background:url('../../../../static/icon/leftArrow.svg') no-repeat center center;

        }
      }
    }
  }
}
</style>
